<template>
	<view class="ys-page">
		<view class="top">
			<uni-section title="紧急联系人" type="line" linebg="#ff9466">
				<view class="inputbox">
					<uni-easyinput v-model="dataInfo.emergencyContact" :clearable="false"
						placeholder="请输入紧急联系人"></uni-easyinput>
				</view>
			</uni-section>
			<uni-section title="租赁开始时间" type="line" linebg="#ff9466">
				<view class="inputbox">
					<uni-datetime-picker type="date" :clear-icon="false" v-model="dataInfo.leaseStartDate" />
				</view>
			</uni-section>
			<uni-section title="租赁结束时间" type="line" linebg="#ff9466">
				<view class="inputbox">
					<uni-datetime-picker type="date" :clear-icon="false" v-model="dataInfo.leaseEndDate" />
				</view>
			</uni-section>
			<uni-section title="入住人数" type="line" linebg="#ff9466">
				<view class="inputbox">
					<uni-easyinput v-model="dataInfo.peopleNum" :clearable="false"
						placeholder="请输入入住人数"></uni-easyinput>
				</view>
			</uni-section>

			<uni-section title="租金" type="line" linebg="#ff9466">
				<view class="inputbox">
					<uni-easyinput v-model="dataInfo.rent" :clearable="false" placeholder="请输入租金"></uni-easyinput>
				</view>
			</uni-section>
			<uni-section title="押金" type="line" linebg="#ff9466">
				<view class="inputbox">
					<uni-easyinput v-model="dataInfo.securityDeposit" :clearable="false"
						placeholder="请输入押金"></uni-easyinput>
				</view>
				<uni-section title="支付方式" type="line" linebg="#ff9466">
					<view class="inputbox">
						<uni-easyinput v-model="dataInfo.paymentMethod" :clearable="false"
							placeholder="请输入支付方式"></uni-easyinput>
					</view>
				</uni-section>
			</uni-section>
		</view>
		<view class="title">
			搜索入住人员信息
		</view>
		<view class="top">
			<uni-section title="姓名" type="line" linebg="#ff9466">
				<view class="inputbox">
					<uni-easyinput v-model="name" :clearable="false" placeholder="请输入姓名"></uni-easyinput>
				</view>
			</uni-section>
			<uni-section title="身份证" type="line" linebg="#ff9466">
				<view class="inputbox">
					<uni-easyinput v-model="idcard" :clearable="false" placeholder="请输入身份证"></uni-easyinput>
				</view>
			</uni-section>
			<button class="search short" @click="getTenantUser" :loading="loading" :disabled="loading">搜索</button>
		</view>
		<view class="title">
			租户列表
		</view>
		<view class="list">
			<view class="item" v-for="(item,index) in dataInfo.tenantRentHouseUserInfoList" :key="index">
				<view class="imgbox">
					<image :src="item.imageUrl" mode="aspectFill"></image>
				</view>
				<view class="info">
					<view class="name">
						{{item.name}}
					</view>
					<view class="phone">
						{{item.nation}}
					</view>
					<view class="idcard">
						{{item.idNum}}
					</view>
				</view>
			</view>
			<view class="no-list" v-if="dataInfo.tenantRentHouseUserInfoList.length == 0">
				- 暂无租户 -
			</view>
		</view>
		<view class="footer">
			<button class="search" @click="contract" :loading="loading" :disabled="loading">签约</button>
		</view>
	</view>
</template>

<script>
	import {
		getTenantUser,
		contract
	} from "@/api/api.js"
	export default {
		data() {
			return {
				name: '',
				idcard: '',
				list: [1, 2, 3],
				loading: false,
				dataInfo: {
					emergencyContact: '',
					leaseEndDate: '',
					leaseStartDate: '',
					paymentMethod: '',
					peopleNum: '',
					rent: '',
					securityDeposit: '',
					tenantRentHouseUserInfoList: [],
					houseId: '',
					roomId: '',
				},
				houseId: '',
				roomId: '',
			}
		},
		onLoad(e) {
			if (e.houseId) this.dataInfo.houseId = e.houseId
			if (e.roomId) this.dataInfo.roomId = e.roomId
		},
		methods: {
			contract() {
				if (this.dataInfo.emergencyContact == '') return uni.$showMsg('请输入紧急联系人')
				if (this.dataInfo.leaseStartDate == '') return uni.$showMsg('请选择租赁开始时间')
				if (this.dataInfo.leaseEndDate == '') return uni.$showMsg('请选择租赁结束时间')
				if (this.dataInfo.peopleNum == '') return uni.$showMsg('请输入入住人数')
				if (this.dataInfo.rent == '') return uni.$showMsg('请输入租金')
				if (this.dataInfo.securityDeposit == '') return uni.$showMsg('请输入押金')
				if (this.dataInfo.paymentMethod == '') return uni.$showMsg('请输入支付方式')
				this.loading = true
				contract(this.dataInfo).then(res => {
					uni.$showMsg(res.msg)
					if (res.code == 200) {
						uni.navigateBack()
					} else {
						this.loading = false
					}
				})
			},
			getTenantUser() {
				if (this.name == '') return uni.$showMsg('请输入租户姓名')
				if (this.idcard == '') return uni.$showMsg('请输入租户身份证')
				this.loading = true
				getTenantUser({
					name: this.name,
					idNum: this.idcard
				}).then(res => {
					uni.$showMsg(res.msg)
					this.loading = false
					if (res.code == 200) {
						this.dataInfo.tenantRentHouseUserInfoList.push(res.data)
						this.name = ''
						this.idcard = ''
					}
				})
			}
		}
	}
</script>

<style lang="scss">
	.ys-page {
		padding-bottom: 40px;
	}

	.no-list {
		padding-bottom: 40px;
	}

	.top {
		background: #fff;
		padding-bottom: 10px;
		width: 96%;
		margin: 0 auto;
		border-radius: 5px;
		box-sizing: border-box;
	}

	.footer {
		position: fixed;
		bottom: 0;
		width: 100%;
		padding: 5px;
		box-sizing: border-box;
		background: #fff;
		z-index: 20;

		button {
			margin-top: 0;
		}
	}

	.inputbox {
		padding: 5px 10px;
	}

	.search {
		background: #ff9466;
		color: #fff;
		font-size: 14px;
		width: 96%;
		margin: 0 auto;
		margin-top: 10px;

		&.short {
			width: 120px;
		}
	}

	.title {
		font-weight: bold;
		padding: 15px 10px;
		font-size: 15px;
	}

	.list {
		padding: 10px;
		padding-top: 0;

		.item {
			background: #fff;
			padding: 5px;
			box-sizing: border-box;
			margin-bottom: 10px;
			border-radius: 5px;
			display: flex;
			align-items: center;

			.imgbox {
				image {
					width: 70px;
					height: 70px;
					border-radius: 4px;
				}
			}

			.info {
				padding-left: 10px;
			}

			.name {
				font-size: 15px;
				font-weight: bold;
			}

			.idcard,
			.phone {
				font-size: 13px;
				margin-top: 5px;
				color: #777;
			}
		}
	}
</style>